<template>
  <view class="ticket-detail-list">
    <!-- 分组 -->
    <view
      v-for="(item, index) in listData"
      :key="index"
      class="ticket-list-group">
      <!-- 分组头部 -->
      <view v-if="!GROUP_TYPE_WITHOUT_TITLE.includes(item.projectKeyNameType)" class="group-title">
        <view class="name">{{item.projectViewName}}</view>
        <view v-if="item.projectIntro" class="intro">{{item.projectIntro}}</view>
      </view>

      <!-- sku列表 -->
      <view class="sku-list">
        <view
          v-for="(skuItem, skuIndex) in item.products"
          :key="skuIndex"
          v-show="skuIndex <= 1 || item.expand"
          class="sku-item-wrapper">
          <view class="sku-item" @click="$emit('click:item', index, skuIndex)">
            <view class="sku-item-left">
              <view class="sku-name">{{skuItem.skuName}}</view>
              
              <view v-if="skuItem.labelAvailableAfterConfirm" class="sku-label">{{skuItem.labelAvailableAfterConfirm}}</view>

              <!-- 标签 -->
              <view class="tag-list">
                <!-- 可订今日/可订明日 -->
                <text v-if="skuItem.labelAvailableDate" class="tag-item">{{skuItem.labelAvailableDate}}</text>

                <!-- 取消政策 -->
                <text v-if="skuItem.labelFreeCancellation" class="tag-item">{{skuItem.labelFreeCancellation}}</text>
              </view>

              <!-- 已售 & 购买须知 -->
              <view class="other-info">
                <!-- <text>已售{{200}}</text>
                <view class="vertical-divider"></view> -->
                <text>购买须知 ></text>
              </view>
            </view>

            <!-- 已售罄样式（服务端的处理逻辑：库存为0时价格也会为0） -->
            <image v-if="!skuItem.price" src="https://imgs.bestwehotel.com/images/inn/1bqEjrZI6Q" class="sold-out" />
            
            <!-- 价格、按钮 -->
            <view class="sku-item-right">
              <!-- 价格为0全部显示为备货中 -->
              <basic-price v-if="skuItem.price" :price="skuItem.price" size="50rpx" :weight="600" unitSize="42rpx" color="#FF5944" unitColor="#FF5944" />
              <view v-else-if="isNaN(skuItem.price)" class="price_font">{{skuItem.price}}</view>
              <!-- <view v-else class="price_font">备货中</view> -->
              
              <view style="margin-top: 10rpx">
                <basic-button
                  width="auto"
                  height="72rpx"
                  borderRadius="10rpx"
                  :disabled="!skuItem.price"
                  @click="$emit('click:booking', index, skuIndex)">立即预订</basic-button>
              </view>
            </view>
          </view>
        </view>
        

        <!-- 查看更多 -->
        <view v-if="item.products.length > DEFAULT_GROUP_LIMIT" class="expand-button" @click="toggleExpand(index)">
          <template v-if="item.expand">收起</template>
          <template v-else>
            查看更多（{{item.products.length - DEFAULT_GROUP_LIMIT}}）
          </template>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'ticket-list',

  props: {
    products: {
      type: Array,
      default: () => []
    }
  },

  data() {
    return {
      listData: [],

      GROUP_TYPE_WITHOUT_TITLE: [99],
      DEFAULT_GROUP_LIMIT: 2, // 分组折叠时显示sku数
    }
  },

  created() {
    this.listData = this.products.map(product => ({
      ...product,
      expand: false
    }))
  },

  methods: {
    toggleExpand(index) {
      let targetItem = this.listData[index]

      targetItem.expand = !targetItem.expand
    }
  }
}
</script>
<style lang="less">
.ticket-detail-list {
  .ticket-list-group {
    border-top: 20rpx solid #F5F5F5;
  }

  .group-title {
    padding: 30rpx;
    border-bottom: 1rpx solid @border_color;
    background-color: #fff;

    .name {
      font-size: 32rpx;
      line-height: 44rpx;
      font-weight: 500rpx;
    }

    .intro {
      line-height: 32rpx;
      margin-top: 12rpx;

      color: @font_light_color;
      font-size: 28rpx;
    }
  }

  .sku-list {
    
    background-color: #fff;

    .sku-item-wrapper {
      margin: 0 30rpx;
      padding: 30rpx 0;
      position: relative;

      &:not(:first-of-type) {
        border-top: 1rpx solid @border_color;
      }

      .sold-out{
        width: 132rpx;
        height: 132rpx;
        position: absolute;
        right: 243rpx;
        top: 31rpx;
      }

      .sku-item {
        .flex;
      }

      .sku-item-left {
        .flex-1;
      }

      .sku-name {
        font-size: 26rpx;
        font-weight: 600;
        line-height: 38rpx;
      }

      .sku-label {
        color: @font_desc_color;
        font-size: 22rpx;
        line-height: 30rpx;
        margin-top: 18rpx;
      }

      .tag-list {
        margin-top: 2rpx;

        .tag-item {
          .round-tag(34rpx, 8rpx);

          color: @font_tag_color;
          font-size: 20rpx;
          background-color: fade(@font_tag_color, 10%);
          margin: 10rpx 20rpx 0 0;
        }
      }

      .other-info {
        .flex;
        .flex-middle;

        color: @font_desc_color;
        font-size: 20rpx;
        line-height: 28rpx;

        margin-top: 20rpx;

        .vertical-divider {
          width: 2rpx;
          height: 20rpx;
          margin: 0 20rpx;
          background-color: @font_desc_color;
        }
      }

      .sku-item-right {
        .flex;
        .flex-column;
        .flex-end;

        text-align: right;

        box-sizing: content-box;

        .price_font {
          color: @price_color;
          font-size: 32rpx;
          font-weight: 600;
        }
      }
    }

    .expand-button {
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;

      margin: 0 30rpx;

      border-top: 1rpx solid @border_color;
    }
  }
}
</style>